<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">修改count</button>

    <p>{{ person }}</p>
    <button @click="changePerson">修改person</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRef } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { ref, watch } from 'vue';

const count = ref(0);
// 对于ref保存的是一个基本类型值的话，我们直接监听当前ref对象即可得到值的改变
watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});

// 对于ref保存的是一个对象类型
const person = ref({
  name: '张三',
  age: 18,
  score: {
    ch: 100,
    math: 80,
  },
});

const changePerson = () => {
  person.value.age = 120;
};

// 如果ref对象保存的是一个对象类型，我们监听ref对象，可以监听到对象的替换（可以监听到ref对象的value的替换）
// 总结：如果监听ref对象，则只能监听ref对象的value属性的替换，如果想要深层次的监听要使用deep深度监听
// watch(
//   person,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal);
//   },
//   {
//     deep: true,
//   }
// );

// 总结：watch监听ref对象的value属性（值是代理对象），只能监听value属性内部的修改（默认深度监听），无法监听value属性的值被替换
// watch(person.value, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// });

// 如果深层次的监听一个对象内部的属性（是对象类型），监听的是这个对象内部被修改（默认深度监听），不能监听当前的属性值被替换
// watch(person.value.score, (newVal, oldVal) => {
//   console.log(newVal, oldVal);
// });

// 总结：监听一个属性值被替换，watch的第一个参数可以使用函数的方式
watch(
  () => person.value.age,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  {
    deep: true,
  }
);

// watch监听多个
watch([() => person.value.age, () => person.value.name], (newVal, oldVal) => {
  console.log(newVal, oldVal);
});
</script>

<style></style>
